<!-- 我的钱包 -->
<template>
  <view class="wallet-wrap">
    <!-- 钱包卡片 -->
    <view class="filter-box">
      <i-card
        background="url('../../static/images/xq_bg.png') no-repeat center center"
      >
        <view class="card-box">
          <view class="card-head u-flex u-col-center">
            <view class="card-title u-m-r-10"
              >累计退款
              <image
                @tap="showMoney = !showMoney"
                src="../../static/images/eyes_icon.png"
                mode="widthFix"
                class="card-bg"
              ></image>
            </view>
            <view class="money-num u-p-t-50">{{
              showMoney ? "0.00" : "*****"
            }}</view>
          </view>

          <!-- <i-buttons
            @tap="taps"
            border="#FFFFFF"
            color="#FFFFFF"
            bgColor="rgba(255,255,255,0.1)"
            radius="30rpx"
            >详情</i-buttons
          > -->
        </view>
      </i-card>
    </view>
    <view style="height: 88rpx; padding-top: 12rpx;">
        <i-tab @change="change" v-model="stateCurrent" :isScroll="false" :list="statusList"></i-tab>
    </view>

    <view class="scroll_body">
      <scroll-view
        scroll-y="true"
        style="height: 100%"
        @scrolltolower="reachBottom"
      >
        <view
          class="wallet-list"
          v-for="(item, index) in walletLog"
          :key="index"
        >
          <!-- <view class="titles">
            <view class="fs-bold">
              {{ item.createTime }}
            </view>
          </view> -->
          <view class="titles">
						<view class="fs-bold">
							{{item.accountTrend}}
						</view>
					<text>{{item.amountType}}</text>
					</view>
					<view class="titles" style="margin: 18rpx 0;">
						<view class="">
							{{item.businessType}}
						</view>
						<view :style="{color: item. accountTrend === '赚取' ? 'red' : 'green'}" class="fs-bold">
							<text>{{ item. accountTrend === '赚取' ? '+': '-'}}</text> {{item.amount}}
						</view>
					</view>
					<view class="list-content">
						<view class="title-box u-flex u-row-between">
							<text class="title u-ellipsis-1">{{ item.type_name }}{{ item.title ? '-' + item.title : '' }}</text>
							<view class="money">
								<text v-if="item.wallet >= 0" class="add font-OPPOSANS">+{{ item.wallet }}</text>
								<text v-else class="minus font-OPPOSANS">{{ item.wallet }}</text>
							</view>
						</view>
						<text class="time">{{ item.createTime }}</text>
					</view>
          <!-- <view class="list-content">
            <view class="list-content_item">
              <text>设备名称</text>
              <text>{{ item.productName || "--" }}</text>
            </view>
            <view class="list-content_item">
              <text>设备地址</text>
              <text>{{ item.address || "--" }}</text>
            </view>
            <view class="list-content_item">
              <text>充电单价</text>
              <text>￥ {{ item.price || "0.00" }}</text>
            </view>
            <view class="list-content_item">
              <text>交易金额</text>
              <text>￥ {{ item.amount || "0.00" }}</text>
            </view>
            <view class="list-content_item">
              <text>网点名称</text>
              <text>{{ item.outletName || "--" }}</text>
            </view>

            <view class="list-content_item">
              <text>网点地址</text>
              <text>{{ item.outletsAddress || "--" }}</text>
            </view>
            <view class="list-content_item">
              <text>创建时间</text>
              <text>{{ item.createTime || "--" }}</text>
            </view>
          </view> -->
        </view>
        <i-more v-if="!isEmpty" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
        <!-- <u-loadmore  height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" /> -->
        <i-notData style="height: 400rpx;" v-if="isEmpty" />
      
      </scroll-view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, onMounted } from "vue";
import useStore from "../../stores/index";
import { getAccountChangeList } from "../../api/order";

const store = useStore();
const userInfo = computed(() => store.userInfo);
const isLogin = computed(() => store.isLogin);

const isEmpty = ref(false);
const stateCurrent = ref(0); // 默认
const statusList = ref([
  {
    title: "订单退款",
    value: 0,
  },
  {
    title: "下级退款",
    value: 1,
  },
  {
    title: "基数还原",
    value: "3",
  },
]);
const showMoney = ref(true);
// 日期选择
const showCalendar = ref(false);
const selDateText = ref("");
const walletLog = ref<any[]>([]); // 钱包记录
const propsDate = ref(""); // 日期参数
const incomeMoney = ref(""); // 收入
const expendMoney = ref(""); // 支出
const loadStatus = ref("loadmore"); // loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
const currentPage = ref(1);
const lastPage = ref(1);
const formData = reactive<any>({
  ypageNum: 1,
  ypageSize: 15,
  total: 0,
  amountType: ''
});

// 生命周期方法替代
onMounted(() => {
  if (isLogin.value) {
    getUserInfo();
  }
  formData.ypageNum = 1;
  walletLog.value = [];
  getDeviceIncomeListData();
});

const change = (e: number) => {
  formData.ypageNum = 1;
  walletLog.value = [];
  formData.amountType = statusList.value[e].value;
  getDeviceIncomeListData();
};
// 获取设备收益列表
const getDeviceIncomeListData = async () => {
    uni.showLoading({
         title:'加载中...',
         mask: true

    })
  const res: any = await getAccountChangeList(formData);
  if (res.code === 200) {
    // walletLog.value = walletLog.value.concat(res.rows);
    isEmpty.value =true;
    // formData.total = res.total;
    // loadStatus.value =
    //   walletLog.value.length < formData.total ? "loadmore" : "nomore";
  }
  uni.hideLoading();
};

// 获取用户信息
const getUserInfo = () => {
  store.setUserInfo();
};

// 跳转详情页
const taps = () => {
  uni.navigateTo({
    url: "/pages/order/allRevenueDetails",
  });
};

// 触底加载更多
const reachBottom = () => {
  console.log("ssssss");

  if (walletLog.value.length < formData.total) {
    formData.ypageNum += 1;
    getDeviceIncomeListData();
  }
};
</script>

<style lang="scss">
.wallet-wrap {
  height: calc(100vh - 88rpx - var(--status-bar-height));
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
// 钱包记录
.wallet-list {
  @include card;
  @include flexC;
  box-sizing: border-box;
  // padding: 24rpx 32rpx;

  width: calc(100% - 48rpx);
  margin: 0 auto;
  padding: 24rpx 32rpx;
  margin-top: 24rpx;

  .head-img {
    width: 70rpx;
    height: 70rpx;
    border-radius: 50%;
    background: #ccc;
  }

  .list-content {
    margin-top: 24rpx;
    width: 100%;
    // flex: 1;
    &_item {
      @include flexRS;
      padding: 8rpx 0;
      text:nth-child(2) {
        color: #999;
      }
    }
  }

  .money {
    font-size: 28rpx;
    font-weight: bold;

    .add {
      color: #7063d2;
    }

    .minus {
      color: #333333;
    }
  }
}

.card-box {
  // width: 100%;
  box-sizing: border-box;
  // padding: 40rpx;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  .card-title {
    margin-bottom: 24rpx;
    display: flex;
    align-items: center;
    image {
      width: 32rpx;
      height: 32rpx;
      margin-left: 10rpx;
    }
  }

  .card-head {
    color: #fff;
    font-size: 30rpx;
    display: flex;
    flex-direction: column;
  }

  .money-num {
    font-size: 48rpx;
    font-family: DIN Alternate, DIN Alternate;
    font-weight: bold;
    color: #ffffff;
  }

  .reduce-num {
    font-size: 26rpx;
    font-weight: 400;
    color: #ffffff;
  }

  .withdraw-btn {
    width: 120rpx;
    height: 60rpx;
    line-height: 60rpx;
    background: #ffffff;
    border-radius: 30px;
    font-size: 24rpx;
    font-weight: 500;
    color: #5848c4;
  }

  .topup-btn {
    width: 120rpx;
    height: 60rpx;
    line-height: 60rpx;
    border-radius: 30px;
    font-size: 24rpx;
    font-weight: 500;
    color: #fff;
    border: 1px solid #fff;
    position: absolute;
    right: 180rpx;
    top: 40rpx;
  }
}
// 筛选

.filter-box {
  // height: 240rpx;
  margin-top: 24rpx;
}

// 分类
.state-item {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border-bottom: 1rpx solid rgba(#999, 0.5);

  .state-title {
    color: #666;
    font-weight: 500;
    font-size: 28rpx;
    line-height: 90rpx;
  }

  .title-active {
    color: #333;
  }

  .underline {
    display: block;
    width: 68rpx;
    height: 4rpx;
    background: #fff;
    border-radius: 2rpx;
  }

  .underline-active {
    background: #5e49c3;
    display: block;
    width: 68rpx;
    height: 4rpx;
    border-radius: 2rpx;
  }
}

.scroll_body {
//   flex: 1;
  height: calc(100% - 318rpx);
  .titles {
    width: 100%;
    @include flexRS;
  }
}
</style>
